﻿<!DOCTYPE html>
<html>

<head>
	<meta charset='utf-8'>
	<title>new 易买网注册页面</title>
	<style>
		.error {
			color: red;
		}
	</style>
</head>

<body>
	<form action="#" name="myform" method="get">
		<table align="center" cellspacing=0 cellpadding=10>
			<tr>
				<td align="center" colspan=2>欢迎注册易买网</td>
			</tr>
			<tr>
				<td align="right">用户名：</td>
				<td><input name="username" type="text" /></td>
				<td id="error1" class="error"></td>
			</tr>
			<tr>
				<td align="right">密码：</td>
				<td><input name="password" type="password" /></td>
				<td id="error2" class="error"></td>
			</tr>
			<tr>
				<td align="right">邮箱：</td>
				<td><input name="email" type="text" /></td>
				<td id="error3" class="error"></td>
			</tr>
			<tr>
				<td align="right">手机号：</td>
				<td><input name="phonenum" type="text" /></td>
				<td id="error4" class="error"></td>
			</tr>
			<tr>
				<td align="right">身份证：</td>
				<td><input name="creditID" type="text" /></td>
				<td id="error5" class="error"></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><input style="width:160px;" type="submit" value="注册" /></td>
			</tr>
		</table>
	</form>
	<script>
		// 使用根据给出的 作业5 - 结构.html 结合正则表达式完成表单的验证:
		// 要求:
		// 1).用户名6~15位数字字母下划线, 首字母必须为英文字母

		// 2).密码6~10位可以为字母和数字

		// 3).判断邮箱是否合法（比如123@qq.com）

		// 4).判断手机号码是否正确(13 / 14 / 15 / 17 / 18 / 19开头, 长度11位)

		// 5).判断身份证号码是否正确(长度17位数字 + 最后一位可以是数字或者x，x不区分大小写)
		// 点击完成按钮时，如果填写错误，需要显示错误信息（同第18次课事件1作业写的那样）
		// 或者使用 | 表示

		// 在这里写表单验证的JS代码
		var myform = document.myform; // 这个是form表单
		var username = myform.username; // 这个是用户名输入框
		var password = myform.password; // 这个是密码输入框
		var email = myform.email; // 这个是邮箱输入框
		var phonenum = myform.phonenum; // 这个是手机号码输入框
		var creditID = myform.creditID; // 这个是身份证号输入框
		var error = document.querySelectorAll(".error"); // 获取了所有的提示文本
		console.log(error);
		document.myform.onsubmit = function () {
			if (!(/^[a-zA-Z]\w{5,14}$/ig.test(username.value))) {
				error[0].innerHTML = "用户名输入错误，请按照要求输入！";
			} else {
				error[0].innerHTML = "";
			}

			if (!(/^\w{6,10}$/g.test(password.value))) {
				error[1].innerHTML = "密码输入错误，请按照要求输入！";
			} else {
				error[1].innerHTML = "";
			}

			if (!(/^[a-zA-Z1-9]+@\w+\.[a-zA-Z]{2,5}$/ig.test(email.value))) {
				error[2].innerHTML = "邮箱输入错误，请按照要求输入！";
			} else {
				error[2].innerHTML = "";
			}

			if (!(/^1[3-57-9]\d{9}$/g.test(phonenum.value))) {
				error[3].innerHTML = "手机号输入错误，请按照要求输入！";
			} else {
				error[3].innerHTML = "";
			}

			if (!(/^\d{17}[0-9x]$/ig.test(creditID.value))) {
				error[4].innerHTML = "身份证输入错误，请按照要求输入！";
			} else {
				error[4].innerHTML = "";
			}
			return false;
		}
	</script>
</body>

</html>